<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网抑郁歌单</title>
<link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.min.css">
<style>
    @import url(playlist.css);
    @import url(../../css/nav.css);

    body {
        padding-top: 0;
    }
    .navbar {
        margin-bottom: 0;
        border-radius: 0;
    }
    .main-container {
    margin-top: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <!-- 导航栏 -->
        <ul class="nav navbar-nav">
            <li class="active"><a href="/dev/view/index.html">首页</a></li>
            <li><a href="/dev/view/topChart/rank.html">排行榜</a></li>
            <li><a href="/dev/view/playList/playlist.html">歌单</a></li>
        </ul>

        <!-- 登录按钮 -->
        <ul class="nav navbar-nav navbar-right" id="loginButton">
            <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
            <!-- 初始隐藏头像 -->
            <li><img id="nav_img" src="/dev/img/1.png" style="display: none;"></li>
        </ul>

        <!-- 搜索框 -->
        <form class="navbar-form navbar-right" id="searchForm">
            <div class="form-group">
                <input type="text" class="form-control" id="searchInput" placeholder="搜索音乐">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>

    </div>
    </div>

    <!-- 模态框（Modal）-begin -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户登录入口

                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 登录表单   -begin -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                                <span class="form-control-feedback glyphicon glyphicon-envelope"></span>
                                <span class="text-danger" id="email_span" style="display: none">sorry,email is not found!</span>
                            </div>
                            <div class="col-md-2" style="margin-left: -20px;">
                                <button type="button" class="btn btn-success" onclick="send_code()">发送验证码</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="code" class="col-sm-2 control-label">验证码</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                                <span class="form-control-feedback glyphicon glyphicon-phone"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" onclick="login()">登录</button>
                            </div>
                        </div>
                    </form>
                    <!-- 登录表单 -end -->
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal）- end -->
</nav>

<div class="container main-container">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-md-3 col-xs-12 sidebar">
            <div class="filter-title">歌曲语种</div>
            <div class="list-group">
                <div class="language-filter active" data-language="all">全部歌单</div>
                <div class="language-filter" data-language="chinese">华语歌曲</div>
                <div class="language-filter" data-language="western">欧美歌曲</div>
                <div class="language-filter" data-language="japanese">日语歌曲</div>
                <div class="language-filter" data-language="korean">韩语歌曲</div>
            </div>
        </div>

        <!-- 歌单内容 -->
        <!-- 修改后的歌单内容部分 -->
        <div class="col-md-9 col-xs-12">
            <div class="row playlist-container">
                <!-- 此处内容将由JavaScript动态生成 -->
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- API接口示例和初始化脚本 -->
<script src="app.js"> </script>
<script src="search.js"> </script>
<script>
    // 页面加载时检查是否登录
    window.onload = function () {
        const token = localStorage.getItem('token');
        const navImg = document.getElementById('nav_img');
        const sidebarAvatar = document.querySelector('.user-avatar');
        if (token) {
            // 用户已登录，隐藏登录按钮，显示个人信息和头像
            document.getElementById('loginButton').style.display = 'none';
            document.getElementById('username').style.display = 'block';
            document.getElementById('userLevel').style.display = 'block';
            document.getElementById('userPoints').style.display = 'block';
            document.getElementById('pleaseLogin').style.display = 'none';
            navImg.style.display = 'block'; // 显示导航栏头像
            //sidebarAvatar.style.display = 'block'; // 显示侧边栏头像
        } else {
            // 用户未登录，显示登录按钮，隐藏个人信息和头像
            document.getElementById('loginButton').style.display = 'block';
            document.getElementById('username').style.display = 'none';
            document.getElementById('userLevel').style.display = 'none';
            document.getElementById('userPoints').style.display = 'none';
            document.getElementById('pleaseLogin').style.display = 'block';
            navImg.style.display = 'none'; // 隐藏导航栏头像
            //sidebarAvatar.style.display = 'none'; // 隐藏侧边栏头像
        }
    };
</script>
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugins/jquery/jquery.min.js"></script>

</body>
</html>